<template>
  <div>
    <van-nav-bar title="严选专栏" fixed left-arrow>
      <template #left>
        <van-icon name="arrow-left" color="gray" @click="Onclick" />
      </template>
    </van-nav-bar>
    <div class="box"></div>
    <div class="Special_box">
      <div v-for="(item, index) in SpecialList" :key="index" class="Special">
        <div class="Special_img">
          <img :src="item.pic" alt="" />
        </div>
        <div class="Special_title">
          <p class="Special_Title_p">{{ item.title }}</p>
          <p class="van-ellipsis">{{ item.descript }}</p>
             <div class="Special_butoon">查看详情</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      SpecialList: [],
    };
  },
  methods: {
    Onclick() {
      this.$router.go(-1);
    },
  },
  mounted() {
    this.$Acc.YanxuanTitle().then((res) => {
      console.log(res.data.data);
      this.SpecialList = res.data.data;
    });
  },
};
</script>
<style  scoped>
.bb {
  margin-top: 3rem;
}
.box {
  width: 100%;
  height: 50px;
}
.Special_box {
  width: 100%;
}
.Special{
  width: 100%;
  position: relative;
  text-align: center ;

}
.Special_img img {
  width: 100%;
  height: 13rem;
}
.Special_title {
  width: 100%;
  position: absolute;
  bottom: 50px;
  left: 0;
  color: white;
}
.Special_butoon{
  width: 20%;
  height: 2rem;
  text-align: center;
  margin-top: 2rem;
  margin-left: 40%;
  border: 0.1rem solid gainsboro;
  border-radius:1rem ;
  line-height: 2rem;
}
</style>